<template>
  <div style="display: flex;height: 100%" class="scroll-container" @scroll="handleScroll">
    <div style="margin-bottom: 30px;margin-top: 10px;width: 90%;height: 500px">
      <div v-for="(item) in community" :key="item.id" :ref="item.id" class="community">
        <Content :content="item" />
      </div>
      <div v-if="isLoading" class="loader">加载中...</div>
    </div>
    <div id="distribute">
      <el-button
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="toDistribute"
      >发布</el-button>
    </div>
  </div>
</template>
<script>
import Content from '@/views/pisciculture/communityCommunication/content.vue'
import { initData } from '@/api/data'
import { addViewNum } from '@/api/pisciculture/communityCommunication'

export default {
  components: { Content },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      community: [], // 初始化数据
      communication: {
        id: null
      },
      isLoading: false,
      totalPages: '' // 总页数
    }
  },

  mounted() {
    initData('/api/community_communication', { pageNum: this.pageNum, pageSize: this.pageSize }).then(res => {
      console.log(res)
      this.community = res.data.records
      this.totalPages = res.data.pages
    })
    // window.addEventListener('scroll', this.handleScroll)
    setTimeout(() => {
      // this.handleScroll()
    }, 1000)
  },
  beforeDestroy() {
    // window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll(event) {
      this.community.forEach((item) => {
        const element = this.$refs[item.id][0]
        const rect = element.getBoundingClientRect()
        const isVisible = rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
        if (isVisible && !this.community.isView) {
          this.community.isView = true
          // console.log('查看了')
          this.communication.id = item.id
          addViewNum(JSON.stringify(this.communication))
        }
      })
      if (!this.isLoading && this.pageNum <= this.totalPages) {
        const { scrollTop, clientHeight, scrollHeight } = event.target
        // console.log('高度', scrollTop, clientHeight, scrollHeight)
        // 当滚动到底部时加载更多
        if (scrollTop + clientHeight * this.pageNum >= scrollHeight) {
          this.pageNum += 1
          this.isLoading = true
          initData('/api/community_communication', { pageNum: this.pageNum, pageSize: this.pageSize }).then(res => {
            // 注意：concat方法不会改变现有数组，而是返回一个新数组
            this.isLoading = false
            this.community = [...this.community, ...res.data.records]
            console.log(this.community)
          })
        }
      }
    },
    toDistribute() {
      this.$router.push({ path: '/communityCommunication/distribute' })
    }

  }
}
</script>
<style scoped lang="scss">

.community {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  text-align: left;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
#distribute{
  margin-top: 10px;
  float: right;
  width: 100px;
}
.scroll-container {
  height: 500px; /* 设置一个固定高度 */
  overflow-y: auto; /* 开启滚动 */
  //position: relative;
  border: 1px solid #ccc;
}
.loader {
  //position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}
</style>
